<template>
  <div class="ec-container">
    <div class="title">
      <i :class="['title-icon', iconData.iconClass]" :style="{ backgroundColor: iconData.color }"/>{{ infoTitle }}
      <el-tooltip v-if="infoTips" :content="infoTips"
                  effect="dark" placement="top">
        <!--<i class="wk wk-help wk-help-tips"/>-->
        <i class="el-icon-share"></i>
      </el-tooltip>
    </div>
    <div class="option-bar">
      <flexbox v-if="optionsData.selectionList.length == 0" justify="space-between">
        <el-tabs v-if="showOptions" v-model="optionsData.optionsType" @tab-click="refreshList">
          <el-tab-pane v-for="item in optionsData.options"
                       :key="item.value" :label="item.name" :name="item.value">
            <template v-slot:label>
              <el-badge :value="item.num" :hidden="item.num <= 0">
                <span>{{ item.name }}</span>
              </el-badge>
            </template>

          </el-tab-pane>
        </el-tabs>

        <div>
          <el-select v-if="showSubType" v-model="optionsData.isSubType"
                     :style="{'margin-left': showOptions ? '10px' : 0}" style="width: 120px;"
                     @change="refreshList">
            <el-option v-for="item in [{name: '我的', value: 1}, {name: '我下属的', value: 2}]"
                       :key="item.value"
                       :label="item.name"
                       :value="item.value"/>
          </el-select>
          <!--icon="wk wk-screening"-->
          <el-button v-if="showFilterView" style="margin-left: 10px;" type="primary"
                     class="filter-button el-button--margin "
                     @click="getFilterFieldInfo">高级筛选
          </el-button>
          <template>
            <FilterForm :field-list="optionsData.filterFieldList"
                        v-model:dialog-visible="optionsData.showFilter" :obj="optionsData.filterObj"
                        :crm-type="crmType" :save-scene="false"
                        @filter="handleFilter"/>
          </template>

          <!--icon="wk wk-tag"-->
          <el-button :disabled="!canMark"
                     class="el-button--margin " style="margin-left: 10px;"
                     type="primary" plain @click="allMarkReadClick">全部标记已处理
          </el-button>
        </div>
      </flexbox>
      <flexbox v-else class="selection-bar">
        <div class="selected—title">已选中<span class="selected—count">{{ optionsData.selectionList.length }}</span>项
        </div>
        <flexbox class="selection-items-box">
          <el-button v-for="(item, index) in selectionButtonList"
                     :icon="item.icon" :key="index"
                     type="primary" @click="selectionBarClick(item.type)">{{ item.name }}
          </el-button>
        </flexbox>
      </flexbox>
    </div>
    <FilterContent v-if="optionsData.filterObj.form && optionsData.filterObj.form.length > 0"
                   :obj="optionsData.filterObj" @delete="handleDeleteField"/>
    <el-table v-loading="optionsData.loading" id="crm-table"
              :data="optionsData.list" :height="optionsData.tableHeight"
              :cell-class-name="cellClassName"
              class="n-table--border"
              stripe
              border
              highlight-current-row
              style="width: 100%"
              @row-click="handleRowClick"
              @selection-change="handleSelectionChange">
      <el-table-column :selectable="selectionDisabled"
                       show-overflow-tooltip type="selection" align="center" width="55"/>
      <template v-for="(item, index) in optionsData.fieldList" :key="index">
        <el-table-column :prop="item.prop" :label="item.label" :width="item.width"
                         show-overflow-tooltip>
          <template v-slot:default="{ row, column, $index }">
            <template v-if="item.prop == 'dealStatus'">
              <i :class="dealIcon(row[item.prop]) "/>
              <span>{{ dealName(row[item.prop]) }}</span>
            </template>
            <template v-else-if="item.prop == 'status' && crmType === 'customer'">
              <i v-if="row.status == 2" class="wk wk-circle-password customer-lock"/>
            </template>
            <template v-else-if="item.prop == 'checkStatus'">
              <span :style="getStatusStyle(row.checkStatus)" class="status-mark"/>
              <span>{{ hookCheckStatusMixin.getStatusName(row.checkStatus) }}</span>
            </template>
            <template v-else-if="item.prop == 'invoiceType'">
              {{ fieldFormatter(row, column, row[column.property], item) }}
            </template>
            <WkFieldView v-else :props="item"
                         :form-type="item.formType" :value="row[column.property]">
              <!--<template slot-scope="{ data }">-->
              <template v-slot:default="{ data }">
                {{ fieldFormatter(row, column, row[column.property], item) }}
              </template>
            </WkFieldView>
          </template>
        </el-table-column>
      </template>

      <el-table-column :resizable="false"/>
    </el-table>
    <div class="p-container">
      <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000"/>
      <!--      <el-pagination-->
      <!--        :current-page="currentPage"-->
      <!--        :page-sizes="pageSizes"-->
      <!--        :page-size="pageSize"-->
      <!--        :page-count="total"-->
      <!--        background-->
      <!--        @size-change="handleSizeChange"-->
      <!--        @current-change="handleCurrentChange"/>-->
    </div>

    <!-- 相关详情页面 -->
    <CRMAllDetail v-model:visible="optionsData.showDview"
                  :crm-type="optionsData.rowType"
                  :id="optionsData.rowID"
                  @handle="getList"/>
  </div>
</template>

<script setup>
import {useCrmStore} from "@/store/modules/crm.js";
import {useCheckStatusHook} from "@/hooks/useCheckStatusHook.js";
import {filedGetTableFieldAPI} from "@/api/crm/common.js";
import {
  crmMessageCheckContractAPI, crmMessageCheckInvoiceAPI, crmMessageCheckReceivablesAPI,
  crmMessageFollowCustomerAPI,
  crmMessageFollowLeadsAPI, crmMessagEndContractAPI,
  crmMessageTodayBusinessAPI,
  crmMessageTodayCustomerAPI,
  crmMessageTodayLeadsAPI, crmMessagRemindCustomerAPI, crmMessagRemindreceivablesplanAPI, crmMessagVisitRemindAPI
} from "@/api/crm/message.js";
import {getFormFieldShowName} from "components/NewCom/WkForm/utils.js";
import crmTypeModel from '/src/views/crm/model/crmTypeModel.js'
import {filterIndexfieldsAPI} from '/src/api/crm/common.js'
import {crmLeadsSetFollowAPI} from '/src/api/crm/leads.js'
import {crmCustomerSetFollowAPI} from '/src/api/crm/customer.js'
import {crmMessagAllDealAPI, crmMessagzealByIdAPI} from '/src/api/crm/message.js'

defineOptions({
  /** 客户管理 的待审核系统 */
  name: 'CRMMessage',
})

import FilterForm from '/src/views/crm/componentsNew/FilterFormNew/index.vue'
import FilterContent  from '/src/views/crm/componentsNew/FilterFormNew/FilterContent.vue'
import CRMAllDetail from '/src/views/crm/componentsNew/SzCrud/CRMAllDetail.vue'
import WkFieldView from '/src/components/NewCom/WkForm/WkFieldView.vue'


// 引入消息总线
const cxt = getCurrentInstance() //相当于Vue2中的this
const bus = cxt.appContext.config.globalProperties.$bus


function dealIcon(statu) {
  return statu == 1 ? 'wk wk-success deal-suc' : 'wk wk-close deal-un'
}

function dealName(statu) {
  return statu == 1 ? '已成交' : '未成交'
}

const props = defineProps({
  // crm类型
  crmType: {
    type: String,
    default: ''
  },
  // crm某个类型下的类型数据
  infoType: {
    type: String,
    default: ''
  },

  infoTitle: {
    type: String,
    default: ''
  },

  infoTips: {
    type: String,
    default: ''
  },

  // 标示信息
  iconData: Object,

  // 展示的时候 才发请求
  show: Boolean,

  // 待办模块 用于 标记
  model: Number
})

const emits = defineEmits(['requestNumCount'])

const optionsData = reactive({
  optionsType: '0',
  options: [],
  isSubType: 1, // 是否是下属
  /** 高级筛选 */
  showFilter: false, // 控制筛选框
  filterFieldList: [],
  filterObj: {form: []}, // 筛选确定数据
  /** 勾选数据操作 */
  selectionList: [], // 勾选的数据
  /** 控制详情展示 */
  rowID: '', // 行信息
  rowType: '', // 详情类型
  showDview: false,

  loading: false, // 加载动画
  tableHeight: document.documentElement.clientHeight - 300, // 表的高度
  list: [],
  fieldList: [],
  currentPage: 1,
  pageSize: 15,
  pageSizes: [15, 30, 45, 60],
  total: 0
})


const hookCheckStatusMixin = useCheckStatusHook()

// 展示勾选框
const showFollow = computed(() => {
  if (props.infoType == 'followLeads' || props.infoType == 'followCustomer') {
    return true
  }

  return false
})


// 操作按钮列表
const selectionButtonList = computed(() => {
  const temps = showFollow.value ? [{
    name: '已跟进',
    type: 'follow',
    icon: 'wk wk-edit'
  }] : []
  temps.push({
    name: '标记已处理',
    type: 'mark-deal',
    icon: 'wk wk-tag'
  })
  return temps
})

// 展示筛选
const showFilterView = computed(() => {
  if (props.crmType == 'receivablesPlan') {
    return false
  }
  return true
})

// 展示审核状态
const showCheckStatus = computed(() => {
  if (props.crmType == 'contract' || props.crmType == 'receivables') {
    return true
  }
  return false
})

// 展示客户池天数
const showPoolDay = computed(() => {
  if (props.crmType == 'customer') {
    return true
  }
  return false
})

// 展示我的/下属筛选
const showSubType = computed(() => {
  if (
      props.infoType == 'todayCustomer' ||
      props.infoType == 'todayBusiness' ||
      props.infoType == 'todayLeads' ||
      props.infoType == 'putInPoolRemind' ||
      props.infoType == 'returnVisitRemind' ||
      props.infoType == 'followLeads' ||
      props.infoType == 'followCustomer'
  ) {
    return true
  }
  return false
})

/**
 * 能标记
 */
const canMark = computed(() => {
  if (optionsData.options.length) {
    if (showSubType.value && showOptions.value) {
      return optionsData.optionsType == '1' && optionsData.isSubType == 1
    }

    if (showSubType.value) {
      return optionsData.isSubType == 1
    }

    if (showOptions.value) {
      return optionsData.optionsType == '1'
    }
    return false
  }

  return true
})


watch(() => props.show, () => {
  optionsData.options = getOption()

  if (showOptions.value && optionsData.options.length > 0) {
    optionsData.optionsType = optionsData.options[0].value
  }
  initTableHead()
})

// 展示options下拉选择
const showOptions = computed(() => {
  if (props.infoType == 'putInPoolRemind' || props.infoType == 'returnVisitRemind') {
    return false
  }
  return true
})

const messageNum = computed(() => {
  const crmStore = useCrmStore();
  return crmStore.messageNum
})

onMounted(() => {
  optionsData.options = getOption()

  if (showOptions.value && optionsData.options.length > 0) {
    optionsData.optionsType = optionsData.options[0].value
  }

  initTableHead()


  bus.on('message-scroll', tableHeight => {
    optionsData.tableHeight = tableHeight
  })

  bus.on('examine-handle-bus', () => {
    getList()
  })

  /** 控制table的高度 */
  window.onresize = () => {
    updateTableHeight()
  }
})

/**
 * 初始化表头数据
 */
function initTableHead() {
  if (props.show) {
    optionsData.currentPage = 1
    if (optionsData.fieldList.length == 0) {
      getFieldList()
    } else {
      getList(false)
      // 刷新待办
      const useCrmStore = useCrmStore();
      useCrmStore.GetMessageNum()
      // this.$store.dispatch('GetMessageNum')
    }
  }
}

/**
 * 刷新列表
 */
function refreshList() {
  optionsData.currentPage = 1
  if (optionsData.fieldList.length > 0) {
    getList()
  } else {
    getFieldList()
  }
}

/**
 * 勾选数据
 */
function handleSelectionChange(val) {
  optionsData.selectionList = val // 勾选的行
}

/**
 * 勾选后的操作
 */
function selectionBarClick(type) {
  if (type == 'follow') {
    ElMessageBox.confirm('您确定此操作吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      const request = {
        followLeads: crmLeadsSetFollowAPI,
        followCustomer: crmCustomerSetFollowAPI
      }[props.infoType]
      request(
          optionsData.selectionList
              .map(item => item[props.crmType + 'Id'])
      )
          .then(res => {
            ElMessage.success({message: '操作成功'})
            refreshList()

            emits('on-handle', {
              type: 'follow',
              value: optionsData.selectionList.length,
              infoType: props.infoType
            })

            // this.$parent.requestNumCount()
            emits('requestNumCount')
          })
          .catch(() => {
          })
    })
        .catch(() => {
        })
  } else if (type == 'mark-deal') {
    const params = {model: props.model}
    params.list = optionsData.selectionList
        .map(item => {
          const temp = {}
          const fieldKey = `${props.crmType}Id`
          temp.typeId = item[fieldKey]
          // 待进入公海提醒 需要的公海id
          if (props.infoType == 'putInPoolRemind') {
            temp.poolIds = item.poolIds
          }
          return temp
        })
    crmMessagzealByIdAPI(params).then(res => {
      ElMessage.success({message: '操作成功'})
      getList()
      // this.$parent.requestNumCount()
      emits('requestNumCount')
    }).catch(() => {
    })
  }
}

/**
 * 获取高级筛选字段数据后展示
 */
function getFilterFieldInfo() {
  filterIndexfieldsAPI({
    label: crmTypeModel[props.crmType]
  })
      .then(res => {
        optionsData.filterFieldList = res.data.data || []
        optionsData.showFilter = true
      })
      .catch(() => {
      })
}

/**
 * 选择筛选字段
 */
function handleFilter(form) {
  optionsData.filterObj = form
  optionsData.showFilter = false
  updateTableHeight()
  refreshList()
}

/**
 * 删除筛选字段
 */
function handleDeleteField(data) {
  optionsData.filterObj = data.obj
  updateTableHeight()
  refreshList()
}

/**
 * 通过回调控制class
 */
function cellClassName({row, column, rowIndex, columnIndex}) {
  if (
      (column.property === 'name' && props.crmType != 'contract') ||
      column.property === 'number' ||
      column.property === 'leadsName' ||
      column.property === 'customerName' ||
      column.property === 'businessName' ||
      column.property === 'contactsName' ||
      column.property === 'num' ||
      column.property === 'visitNumber' ||
      column.property === 'invoiceApplyNumber'
  ) {
    return 'can-visit--underline'
  } else {
    return ''
  }
}

/**
 * 全部标记为已读
 */
function allMarkReadClick() {
  crmMessagAllDealAPI({
    model: props.model
  }).then(res => {
    ElMessage.success({message: '操作成功'})
    // this.$parent.requestNumCount()
    emits('requestNumCount')
    getList()
  }).catch(() => {
  })
}

/**
 * 不能进行勾选操作
 */
function selectionDisabled() {
  return canMark.value
}

/**
 * 获取option
 */
function getOption() {
  if (props.infoType == 'todayCustomer' ||
      props.infoType == 'todayBusiness' ||
      props.infoType == 'todayLeads') {
    return [
      {name: '今日需联系', value: '1', num: 0, isMenuNum: true},
      {name: '已逾期', value: '2', num: 0, key: 'overtime'},
      {name: '已联系', value: '3', num: 0}
    ]
  } else if (
      props.infoType == 'followLeads' ||
      props.infoType == 'followCustomer'
  ) {
    return [{name: '待跟进', value: '1', num: 0, isMenuNum: true}, {name: '已跟进', value: '2', num: 0}]
  } else if (
      props.infoType == 'checkContract' ||
      props.infoType == 'checkReceivables' ||
      props.infoType == 'checkInvoice'
  ) {
    return [{name: '待审核', value: '1', num: 0, isMenuNum: true},
      {name: '已审核', value: '2', num: 0}]
  } else if (props.infoType == 'remindReceivablesPlan') {
    return [
      {name: '待回款', value: '1', num: 0, isMenuNum: true},
      {name: '已回款', value: '2', num: 0},
      {name: '已逾期', value: '3', num: 0, key: 'overtime'}
    ]
  } else if (props.infoType == 'endContract') {
    return [{name: '即将到期', value: '1', num: 0, isMenuNum: true},
      {name: '已到期', value: '2', num: 0}]
  }

  return []
}


/**
 * 当某一行被点击时会触发该事件
 * @param {*} row
 * @param {*} column
 * @param {*} event
 */
function handleRowClick(row, column, event) {
  if (props.crmType === 'leads') {
    if (column.property === 'leadsName') {
      optionsData.rowID = row.leadsId
      optionsData.rowType = 'leads'
      optionsData.showDview = true
    } else {
      optionsData.showDview = false
    }
  } else if (props.crmType === 'customer') {
    console.log("customer")
    if (column.property === 'customerName') {
      optionsData.rowID = row.customerId
      optionsData.rowType = 'customer'
      optionsData.showDview = true
    } else {
      optionsData.showDview = false
    }
  } else if (props.crmType === 'contacts') {
    if (column.property === 'customerName') {
      optionsData.rowID = row.customerId
      optionsData.rowType = 'customer'
      optionsData.showDview = true
    } else if (column.property === 'name') {
      optionsData.rowID = row.contactsId
      optionsData.rowType = 'contacts'
      optionsData.showDview = true
    } else {
      optionsData.showDview = false
    }
  } else if (props.crmType === 'business') {
    if (column.property === 'customerName') {
      optionsData.rowID = row.customerId
      optionsData.rowType = 'customer'
      optionsData.showDview = true
    } else if (column.property === 'businessName') {
      optionsData.rowID = row.businessId
      optionsData.rowType = 'business'
      optionsData.showDview = true
    } else {
      optionsData.showDview = false
    }
  } else if (props.crmType === 'contract') {
    if (column.property === 'customerName') {
      optionsData.rowID = row.customerId
      optionsData.rowType = 'customer'
      optionsData.showDview = true
    } else if (column.property === 'businessName') {
      optionsData.rowID = row.businessId
      optionsData.rowType = 'business'
      optionsData.showDview = true
    } else if (column.property === 'contactsName') {
      optionsData.rowID = row.contactsId
      optionsData.rowType = 'contacts'
      optionsData.showDview = true
    } else if (column.property === 'num') {
      optionsData.rowID = row.contractId
      optionsData.rowType = 'contract'
      optionsData.showDview = true
    } else {
      optionsData.showDview = false
    }
  } else if (props.crmType === 'product') {
    if (column.property === 'name') {
      optionsData.rowID = row.productId
      optionsData.showDview = true
    } else {
      optionsData.showDview = false
    }
  } else if (props.crmType === 'receivables') {
    if (column.property === 'customerName') {
      optionsData.rowID = row.customerId
      optionsData.rowType = 'customer'
      optionsData.showDview = true
    } else if (column.property === 'contractNum') {
      optionsData.rowID = row.contractId
      optionsData.rowType = 'contract'
      optionsData.showDview = true
    } else if (column.property === 'number') {
      optionsData.rowID = row.receivablesId
      optionsData.rowType = 'receivables'
      optionsData.showDview = true
    } else {
      optionsData.showDview = false
    }
  } else if (props.crmType === 'receivablesPlan') {
    if (column.property === 'customerName') {
      optionsData.rowID = row.customerId
      optionsData.rowType = 'customer'
      optionsData.showDview = true
    } else if (column.property === 'contractNum' || column.property === 'contractName') {
      optionsData.rowID = row.contractId
      optionsData.rowType = 'contract'
      optionsData.showDview = true
    } else {
      optionsData.showDview = false
    }
  } else if (props.crmType === 'invoice') {
    if (column.property === 'customerName') {
      optionsData.rowID = row.customerId
      optionsData.rowType = 'customer'
      optionsData.showDview = true
    } else if (column.property === 'contractNum') {
      optionsData.rowID = row.contractId
      optionsData.rowType = 'contract'
      optionsData.showDview = true
    } else if (column.property === 'invoiceApplyNumber') {
      optionsData.rowID = row.invoiceId
      optionsData.rowType = 'invoice'
      optionsData.showDview = true
    } else {
      optionsData.showDview = false
    }
  }
}

/** 获取列表数据 */
function getList(loading = true) {
  optionsData.loading = optionsData.loading
  let crmIndexRequest = getIndexRequest()
  const params = {
    page: optionsData.currentPage,
    limit: optionsData.pageSize
  }

  if (showSubType.value) {
    params.isSub = optionsData.isSubType
  }

  if (showOptions.value) {
    params.type = optionsData.optionsType
  }

  const filterObj = optionsData.filterObj.obj
  if (filterObj && Object.keys(filterObj).length > 0) {
    params.data = filterObj
  }

  crmIndexRequest(params).then(res => {
    console.log("res", res)
    optionsData.list = res.data.data.list
    optionsData.total = res.data.data.totalRow
    const extraData = res.data.data.extraData
    optionsData.options.forEach(item => {
      if (item.isMenuNum) {
        item.num = messageNum.value[props.infoType]
      } else if (item.key) {
        item.num = extraData ? extraData[item.key] : 0
      } else {
        item.num = 0
      }
    })

    optionsData.loading = false
  }).catch(() => {
    optionsData.loading = false
  })
}

/** 获取列表请求 */
function getIndexRequest() {
  console.log("props.infoType", props.infoType)
  return {
    'todayLeads': crmMessageTodayLeadsAPI,
    'todayCustomer': crmMessageTodayCustomerAPI,
    'todayBusiness': crmMessageTodayBusinessAPI,
    'followLeads': crmMessageFollowLeadsAPI,
    'followCustomer': crmMessageFollowCustomerAPI,
    'checkContract': crmMessageCheckContractAPI,
    'checkReceivables': crmMessageCheckReceivablesAPI,
    'remindReceivablesPlan': crmMessagRemindreceivablesplanAPI,
    'endContract': crmMessagEndContractAPI,
    'putInPoolRemind': crmMessagRemindCustomerAPI,
    'returnVisitRemind': crmMessagVisitRemindAPI,
    'checkInvoice': crmMessageCheckInvoiceAPI
  }[props.infoType]
}

/** 获取字段 */
function getFieldList() {
  filedGetTableFieldAPI({
    label: crmTypeModel[props.crmType]
  }).then(res => {
    handelFieldList(res.data.data)

    // 获取好字段开始请求数据
    getList()
  })
      .catch(() => {
        optionsData.loading = false
      })
}

function handelFieldList(list) {
  for (let index = 0; index < list.length; index++) {
    const element = list[index]
    var width = 0
    if (!element.width) {
      if (element.name && element.name.length <= 6) {
        width = element.name.length * 15 + 45
      } else {
        width = 140
      }
    } else {
      width = element.width
    }

    // 发票过滤掉开票状态
    if (props.crmType === 'invoice' && element.fieldName === 'invoiceStatus') {
      continue
    }

    optionsData.fieldList.push({
      prop: element.fieldName,
      label: element.name,
      formType: element.formType,
      width: width
    })
  }

  // // 待进入公海的客户 添加距进入公海天数字段
  // if (this.infoType == 'putInPoolRemind') {
  //   this.fieldList.push({
  //     prop: 'poolDay',
  //     label: '距进入公海天数',
  //     width: 140
  //   })
  // }
}

/** 格式化字段 */
function fieldFormatter(row, column, cellValue, field) {
  // 如果需要格式化
  if (column.property == 'invoiceType') {
    return {
      1: '增值税专用发票',
      2: '增值税普通发票',
      3: '国税通用机打发票',
      4: '地税通用机打发票',
      5: '收据'
    }[row[column.property]] || '--'
  }

  if (field) {
    return getFormFieldShowName(field.formType, row[column.property], '--', field)
  }
  return row[column.property] === '' || row[column.property] === null ? '--' : row[column.property]
}

// 更改每页展示数量
function handleSizeChange(val) {
  optionsData.pageSize = val
  getList()
}

// 更改当前页数
function handleCurrentChange(val) {
  optionsData.currentPage = val
  getList()
}


// 0待审核、1审核中、2审核通过、3审核未通过
function getStatusStyle(status) {
  return {
    backgroundColor: hookCheckStatusMixin.getStatusColor(status)
  }
}

/**
 * 更新表高
 */
function updateTableHeight() {
  var offsetHei = document.documentElement.clientHeight
  var removeHeight = Object.keys(optionsData.filterObj).length > 0 ? 360 : 300
  optionsData.tableHeight = offsetHei - removeHeight
}


function beforeDestroy() {
  bus.off('message-scroll')
  bus.off('examine-handle-bus')

  if (document.getElementById('crm-table')) {
    document.getElementById('crm-table').removeEventListener('click', e => {
      e.stopPropagation()
    })
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import '../styles/table';
/** 场景和筛选 */
.filtrate-button {
  cursor: pointer;
  margin-left: 10px;
  display: inline-block;

  &-img {
    vertical-align: middle;
    margin: 0 5px;
    width: 12px;
  }
}

.filtrate-button:hover {
  color: #2362FB;
}

.ec-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.title {
  padding: 10px 20px;
  font-size: 14px;
  color: #333;

  .title-icon {
    display: inline-block;
    font-size: 12px;
    padding: 6px;
    width: 25px;
    height: 25px;
    border-radius: $xr-border-radius-base;
    color: white;
    margin-right: 10px;
  }

  .wk-help {
    margin-left: 5px;
  }
}

.option-bar {
  padding: 15px 20px;

  .el-tabs {
    width: 280px;

    :deep( .el-tabs__header ) {
      margin: 0;

      .el-tabs__nav-wrap::after {
        display: none;
      }
    }
  }

  .el-badge {
    line-height: initial;
  }
}

/** 勾选操作 */
.selection-bar {
  font-size: 12px;
  height: 35px;
  color: #777;

  .selected—title {
    flex-shrink: 0;
    padding-right: 20px;
    color: #333;

    .selected—count {
      color: $xr-color-primary;
    }
  }
}

.selection-items-box {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 15px;

  .el-button {
    color: #666;
    background-color: $xr--background-color-base;
    border-color: $xr--background-color-base;
    font-size: 12px;
    height: 28px;
    border-radius: 14px;

    :deep( i ) {
      font-size: 12px;
      margin-right: 5px;
    }
  }

  .el-button--primary:hover {
    background: $xr-color-primary;
    border-color: $xr-color-primary;
    color: #ffffff;
  }

  .el-button + .el-button {
    margin-left: 15px;
  }
}

.n-table--border {
  border-top: 1px solid $xr-border-line-color;
}

.el-button--primary.is-plain {
  background-color: white;
}

.el-button--primary.is-plain:focus,
.el-button--primary.is-plain:active,
.el-button--primary.is-plain:hover {
  color: $xr-color-primary;
}

// 拉开图标与文字距离
.el-button--margin {
  :deep(i ) {
    margin-right: 5px;
  }
}
</style>
